import React, { PureComponent } from 'react'

export default class Demo extends PureComponent {
    
    state = {carName:"奔驰c36"}

    changeCar = () => {
        this.setState({carName:'迈巴赫'})//
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     // console.log(this.props, this.state); // 目前的props和state
    //     // console.log(nextProps, nextState); // 接下来要变化的目标peops,目标state
    //     return !(this.state.carName === nextState.carName)
    // }

    render() {
        let { carName } = this.state;
        console.log('Demo---render');
        return (
            <div style={{backgroundColor:'gray',padding:'10px'}}>
                <h1>我是Demo组件</h1>
                <span>我的车名字是：{ carName }</span>
                <button onClick={this.changeCar}>点我换车</button>
                <Child carName={ carName } />
            </div>
        )
    }
}

class Child extends PureComponent {

    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log(this.props, this.state); // 目前的props和state
    //     console.log(nextProps, nextState); // 接下来要变化的目标peops,目标state
    //     return !(this.props.carName === nextProps.carName)
    // }

    render() {
        console.log('Child---render');
        return (
            <div style={{backgroundColor:'red',padding:'10px'}}>
                <h1>我是Child组件</h1>
                <span>我接到的车是：{ this.props.carName }</span>
            </div>
        )
    }
}